<template>
  <div class="questionHomepage">
    <div class="questionCon">
      <div class="topImg"></div>
      <img class="closeImg"
           src="../../../assets/img/close.png"
           @click="closeAdd"
           alt="">
      <div class="box">
        <div class="boxList">
          <div class="questionList">
            <div class="questionNav">
              <p class="homepageTitle">{{exerciseName}}</p>
              <p class="questionInfo">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！非常感谢您愿意用几分钟的时间完成本次调查问卷。所有答卷信息都将保密，请放心填写！<br>
                <span v-if="getRemark()==''?false:true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getRemark()}}</span>
              </p>
            </div>
            <div style="display:flex;justify-content: space-between;">
              <div class="listName">
                <span>被评价者：</span>
                <el-select v-model="evaluateVal"
                           v-if="types === 'check'"
                           @change="choosePeople"
                           placeholder="请选择">
                  <el-option v-for="item in evaluateOptions"
                             :key="item.person_id"
                             :label="item.person_name"
                             :value="item.person_id">
                  </el-option>
                </el-select>
                <el-input disabled
                          v-model="personName"
                          v-else></el-input>
              </div>
              <div class="score">
                <span>{{this.all}}</span>
                <p>当前分值</p>
              </div>
            </div>

            <div class="listCon list-padd-style"
                 v-for="(item1,ind) in detailObj.list"
                 :key="ind">
              <p class="list-con-title">{{getIndex(ind)}} {{item1.title}}({{item1.score}})</p>
              <div v-for="(item,index) in item1.children"
                   class="listCon"
                   :key="item.question_id">
                <p class="questionTitle">{{(index+1)+'、'+item.question_name + '('+item.score+'分)'}}</p>
                <div style="position:relative;margin: 0 20px;">
                  <!-- disabled -->
                  <el-slider style="position:relative"
                             show-input
                             disabled
                             v-model="item.evaluate_score"
                             @change="changeVal(ind,item,index)"
                             :max="Number(item.score)"
                             tooltip-class="changeTooltip">
                  </el-slider>
                  <div :style="{'left':(Number(item.evaluate_score)/Number(item.score))*100-3+'%'}"
                       class="scoreVal">
                    {{item.evaluate_score}}
                  </div>
                  <div class="tipBot">
                    <div>非常不符合</div>
                    <div>非常符合</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="listCon"
                 v-for="item in questionList"
                 :key="item.question_id">
              <p class="questionTitle">{{item.question_id+'、'+item.question_name + '('+item.score+'分)'}}</p>
              <div style="position:relative;margin: 0 20px;">
                <el-slider style="position:relative"
                           show-input
                           disabled
                           v-model="item.evaluate_score"
                           :max="Number(item.score)"
                           tooltip-class="changeTooltip">
                </el-slider>
                <div :style="{'left':(Number(item.evaluate_score)/Number(item.score))*100-3+'%'}"
                     class="scoreVal">
                  {{item.evaluate_score}}
                </div>
                <div class="tipBot">
                  <div>非常不符合</div>
                  <div>非常符合</div>
                </div>
              </div>
            </div> -->

          </div>
        </div>

        <!-- <div class="bottomBtn">
          <el-button>取消</el-button>
          <el-button type="primary"
                     @click="submit">提交</el-button>
        </div> -->
      </div>

    </div>

  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      detailObj: {//详情
        exercise_info: {
          remark: '',
          exercise_name: '',
          score: ''
        },
        list: []
      },
      types: '',
      personName: '',
      exerciseName: '',
      sliderList: [],
      exerciseId: '', //问卷id
      dataId: '',//评价人数据id
      evaluate_data: [],
      phoneVal: '',
      evaluateVal: "",
      sliderVal: 0,
      evaluateOptions: [],
      questionList: [],
      all: 0,
      arrs: [],
      evaluatePeopleIds: [],
    }
  },
  created () {
    let exerciseName = this.$route.query.exerciseName || '';
    this.types = this.$route.query.types
    this.evaluatePeopleIds = this.$route.query.evaluatePeopleId
    this.dataId = this.$route.query.dataId

    if (this.types === 'check') {
      this.exerciseName = this.$route.query.exerciseName
      this.getQuestionList()
    } else {
      this.personName = this.$route.query.personName
      this.selEvaluate()
      this.getQuestionDetail()
    }

  },
  mounted () {
  },
  watch: {},
  methods: {
    getIndex (ind) {
      let indexVal = '';
      let arr = ['一、', '二、', '三、', '四、', '五、'];
      arr.map((item, inV, arr) => {
        if (inV == ind) {
          indexVal = item;
        }
      })
      return indexVal;
    },
    getRemark () {
      let remarkV = this.detailObj.exercise_info.remark || ''
      return remarkV;
    },
    //评价人选择
    selEvaluate () {
      backEvaluateApi.seclectPeople({
        params: {
          phone: this.$route.query.phones
        }
      }).then((res) => {
        this.evaluateOptions = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //选中被评论人
    choosePeople (val) {
      this.evaluateOptions.forEach(item => {
        if (item.person_id === val) {
          this.dataId = item.evaluator_data_id
        }
      })
      this.getQuestionDetail()
    },
    //活动管理获取问题详情
    getQuestionDetail () {
      backEvaluateApi.checkDetail({
        params: {
          evaluator_data_id: this.dataId,
          // evaluator_data_id: 13,
          is_page: 0
        }
      }).then((res) => {
        let arr = res.data.list
        arr.map((item) => {
          //  this.$set(item, 'sliderVal', 0)
          item.evaluate_score = Number(item.evaluate_score)
        })
        this.questionList = arr
        this.all = res.data.total_score
        this.exerciseName = res.data.exercise_name
      }).catch(err => {
        console.log(err);
      })
    },
    //获取问题列表lookTestList
    getQuestionList () {
      backEvaluateApi.getQuestionList({
        params: {
          exercise_id: this.$route.query.exerciseId,
          is_page: 0
        }
      }).then((res) => {
        var remark = res.data.exercise_info.remark || '';
        this.detailObj = res.data;
        this.detailObj.exercise_info.remark = remark == '' ? '' : '说明：' + remark;
        // this.questionList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    closeAdd () {
      if (this.types === 'check') {
        this.$router.push({ path: '\TestbaseManagement' })
      } else {
        this.$router.push({ path: '\EvaluateDetail', query: { dataId: this.evaluatePeopleIds } })
      }

    }
  },
  computed: {},
}
</script>
<style>
html,
body {
  height: 100%;
}
#hibuilding-app {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.questionHomepage {
  position: relative;
  background-color: #efeff4;
  height: 100%;
  .box {
    width: 600px;
    margin: 0 auto;
    background-color: #fff;
  }
  .boxList {
    padding: 0 15px;
    margin-top: -120px;
  }
  .topImg {
    height: 30vh;
    width: 100%;
    background-image: url("../../../assets/questionImg/top-banner.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .questionCon {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #efeff4;
    .questionNav {
      text-align: center;
      line-height: 40px;
      border-bottom: solid 1px #d9d9d9;
      .homepageTitle {
        font-size: 20px;
        font-family: "PingFang SC Semibold";
        font-weight: 600;
        color: #333;
        padding: 20px 0;
      }
      .questionInfo {
        padding-bottom: 20px;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-align: left;
        color: #666;
      }
    }
    .questionList {
      padding: 20px 0;
      font-size: 12px;
      border-bottom: 1px solid #d9d9d9;
      .listName {
        margin-top: 40px;
        .el-input {
          width: auto;
        }
        span {
          font-size: 14px;
        }
        .el-select /deep/.el-input {
          width: 110%;
          /deep/.el-input__inner {
            width: 100%;
          }
        }
      }
      .score {
        width: 96px;
        height: 96px;
        background: #e6f7ff;
        border: 1px solid #69c0ff;
        border-radius: 50%;
        margin: 15px 10px;
        text-align: center;
        span {
          font-family: "Microsoft YaHei Semibold";
          font-weight: 600;
          font-size: 36px;
          display: block;
          margin-top: 15px;
          color: #1890ff;
        }
      }
      .list-padd-style {
        padding: 0px;
      }
      .listCon {
        padding: 20px 0 20px 0;
        // margin-top: 30px;
        // margin-bottom: 55px;

        .list-con-title {
          font-weight: 600;
          font-size: 16px;
        }
        .questionTitle {
          font-family: "PingFang SC Medium";
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          text-align: left;
          color: #333;
        }
        span {
          position: absolute;
        }
      }
      .tipBot {
        display: flex;
        justify-content: space-between;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        :nth-child(1) {
          color: #666666;
        }
        :nth-child(2) {
          color: #333333;
        }
      }
    }
  }
  .el-slider /deep/.el-slider__input {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-slider /deep/.el-slider__runway.show-input {
    width: 100%;
    height: 2px;
    margin: 25px auto;
    background-color: #bae7ff;
  }
  .el-slider /deep/ .el-slider__bar {
    height: 2px;
    background-color: #1890ff;
  }
  .el-slider /deep/.el-slider__button {
    width: 32px;
    height: 32px;
    border: 2px solid #1890ff;
    background-color: #1890ff;
  }
  .scoreVal {
    width: 32px;
    height: 32px;
    z-index: 9999;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    position: absolute;
    top: 12px;
  }
  .bottomBtn {
    text-align: center;
    padding-bottom: 20px;
    .el-button {
      width: 38vw;
    }
  }
  .closeImg {
    width: 19px;
    position: absolute;
    top: 1%;
    right: 1%;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.changeTooltip {
  font-size: 15px;
  background: transparent !important;
  span {
    display: none;
    // color: #000;
    // top: 41px;
    // left: 5px;
    // position: absolute;
  }
  .popper__arrow::after {
    content: "";
    border-width: 0px !important;
  }
  .popper__arrow {
    border-width: 0px !important;
  }
  .el-slider__marks-text {
    margin-top: 30px;
  }
}
</style>
